/* 学习目标：React中样式处理的两种方式  */
// 1. 👎行内样式
// 2. 👍外部样式
// 2.1 新建样式文件
// 2.2 导入样式文件
// 2.3 分配类名
import React from 'react';
import ReactDOM from 'react-dom/client';
import './base.css';
const root = ReactDOM.createRoot(document.querySelector('#root'));

const ulNode = (
  <>
    {/* 👍连字符使用小驼峰 👎引号包住连字符 */}
    {/* 🔔 单位为px时，可以省略为数字 */}
    <div style={{ color: 'red', backgroundColor: 'pink', fontSize: 20 }}>
      我是行内样式控制的文字
    </div>
    <div className="box">我是外部样式控制的文字</div>
  </>
);
root.render(ulNode);
